<template>
  <div class="execution">
    <basic-container>
      <el-radio-group v-model="params.approvalStatus" style="margin-bottom: 15px;">
        <el-radio-button label="0">待提交</el-radio-button>
        <el-radio-button label="1">已提交</el-radio-button>
      </el-radio-group>
      <avue-crud
        v-bind="bindVal"
        v-on="onEvent"
        :page.sync="page"
        :permission="permissionList">
        <template slot-scope="scope" slot="menuLeft">
          <el-button type="primary"
                     size="small"
                     v-if="params.approvalStatus=='0'"
                     v-permission="permissionList.settleBtn"
                     @click.stop="handleSettle()">长周期结算
          </el-button>
          <el-button type="primary"
                     size="small"
                     v-if="params.approvalStatus=='0'"
                     v-permission="permissionList.submitBtn"
                     @click.stop="handleBatchSubmit()">提 交
          </el-button>
          <el-button type="primary"
                     size="small"
                     @click.stop="handleExport()">导 出
          </el-button>
        </template>
      </avue-crud>
      <open-dialog title="结 算" :DialogVisible.sync="settleVisible">
        <avue-form ref="form" v-model="settleCycle" :option="formOption"></avue-form>
        <dynamic-crud ref="dynamicCrud" title="售票员" :data="nfList"
          :option="dynamicOption"
          :tableLoading="userLoading"
          :button="false">
        </dynamic-crud>
        <template slot="footer">
          <el-button type="primary" size="small"
            @click="settleSubmit" :disabled="userLoading">确 认</el-button>
          <el-button size="small" @click="settleVisible=false">取 消</el-button>
        </template>
      </open-dialog>
      <open-dialog  title="值班站长确认" width="500px" :DialogVisible.sync="submitVisible">
        <avue-form ref="submitForm" v-model="submitForm" :option="submitOption" @submit="submitConfirm"></avue-form>
      </open-dialog>
    </basic-container>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import baseCrud from '@/mixins/base-crud'
import {fetchList as fetchUserList, checkPwd} from '@/api/admin/user'
import {addObj, submit, getDetail} from '@/api/subwaystm/swst-income-settle/bom-settle'

export default {
  name: 'swstbomsettle',
  mixins: [baseCrud('subwaystm/swst-income-settle/bom-settle')],
  data() {
    return {
      params: {
        approvalStatus: '0',
        lineCode: this.$store.getters.userInfo.lineCode,
        stationCode: this.$store.getters.userInfo.stationCode
      },
      settleVisible: false,
      settleCycle: {
        startTime: '',
        endTime: ''
      },
      nfList: [],
      formOption: {
        menuBtn: false,
        column: [{
          label: '开始日期',
          prop: 'startTime',
          type: 'date',
          format: 'yyyy-MM-dd',
          valueFormat: 'yyyy-MM-dd',
          rules: [{
            required: true,
            message: '请选择开始时间'
          }]
        }, {
          label: '结束日期',
          prop: 'endTime',
          type: 'date',
          format: 'yyyy-MM-dd',
          valueFormat: 'yyyy-MM-dd',
          rules: [{
            required: true,
            message: '请选择结束日期'
          }]
        }]
      },
      dynamicOption: {
        index: false,
        selection: true,
        column: [{
          label: '售票员名称',
          prop: 'nikename'
        }]
      },
      userLoading: false,
      submitVisible: false,
      submitOption: {
        labelWidth: 100,
        column: [{
          label: '值班站长',
          prop: 'userName',
          type: 'select',
          component: 'user-select',
          params: {
            // TODO 筛选值班站长
            userCodeKey: 'userCode',
            belongToStation: true
          },
          span: 24,
          rules: [{
            required: true,
            message: '请选择值班站长'
          }]
        }, {
          label: '值班站长工号',
          prop: 'userCode',
          disabled: true,
          placeholder: ' ',
          span: 24
        }, {
          label: '密码',
          prop: 'password',
          type: 'password',
          span: 24,
          rules: [{
            required: true,
            message: '请输入密码'
          }]
        }]
      },
      submitForm: {}
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    permissionList() {
      return {
        settleBtn: this.vaildData(this.permissions.swstbomsettle_long_cycle_sellte, false),
        submitBtn: this.vaildData(this.permissions.swstbomsettle_approval_status, false)
      }
    }
  },
  watch: {
    'params.approvalStatus'(newValue, oldValue) {
      this.getList(this.page)
    }
  },
  methods: {
    handleSettle(){
      this.userLoading = true
      // TODO 过滤售票员
      let query = {
        size: -1,
        stationCode: this.$store.getters.userInfo.stationCode
      }
      fetchUserList(query).then(response => {
        this.nfList = response.data.data.records
        this.userLoading = false
        this.$nextTick(() => {
          this.$refs.dynamicCrud.toggleSelection(this.nfList)
        })
      })
      this.settleVisible = true
    },
    settleSubmit(){
      this.$refs.form.validate(valid => {
        if(valid){
          let startDate = Date.parse(this.settleCycle.startTime)
          let endDate = Date.parse(this.settleCycle.endTime)
          if(startDate > endDate){
            this.$message.warning('开始日期不能大于结束日期')
            return
          }
          let today = Date.parse(new Date().toLocaleDateString())
          if(endDate > today){
            this.$message.warning('结束日期不能大于当前日期')
            return
          }
          let selectedNfList = this.$refs.dynamicCrud.tableSelect
          if(selectedNfList.length == 0){
            this.$message.warning('请选择售票员')
            return
          }
          this.settleCycle.passengerAttendantId = this.userInfo.userId
          this.settleCycle.passengerAttendantJobNo = this.userInfo.userCode
          this.settleCycle.passengerAttendantName = this.userInfo.nikename
          this.settleCycle.nfJobNoList = selectedNfList.map(u => {return u.userCode})
          addObj(this.settleCycle).then(response => {
            this.$message.success('结算成功')
            this.settleVisible = false
            this.getList(this.page)
          })
        }
      })
    },
    handleBatchSubmit(){
      var tableSelect = this.$refs.crud.tableSelect
      if(tableSelect.length == 0){
        this.$message.info('请选择要提交的记录')
        return
      }
      this.submitVisible = true
      setTimeout(() => {
        this.$refs.submitForm.resetForm()
        this.$refs.submitForm.clearValidate()
      }, 0)
      this.$nextTick(() => {
        this.$refs.submitForm.resetForm()
        this.$refs.submitForm.clearValidate()
      })
    },
    submitConfirm(form, done){
      checkPwd(this.submitForm.userCode, this.submitForm.password).then(response => {
        var result = response.data.data
        if(!result){
          this.$message.error('密码错误')
          return Promis.reject()
        }
        let tableSelect = this.$refs.crud.tableSelect
        let ids = tableSelect.map(row => row.id)
        let params = {
          attendancePersonName:  this.submitForm.userName,
          attendancePersonJobNo: this.submitForm.userCode,
          ids,
          status: '1'
        }
        return submit(params)
      }).then(response => {
        this.$message.success('提交成功')
        this.submitVisible = false
        done()
        this.getList(this.page)
      }).catch(() => {
        done()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
